在石器時代,原始人必須很辛苦用鑽木取火的方式來生火,而古代的人開始會用打火石。隨著時代的演進,也開始有打火機、火柴等工具,而在現代,只要有瓦斯充足,你的火源想燃燒多久都可以,且不費吹灰之力。
從此可以看出任何工具都會隨著科技進步而跟著演化,寫程式也是一樣的道理,我們隨時都必須觀察是否有更實用的工具來提升寫 CODE 效率。
以編輯器來說好了,它就是一個很好觀察出科技在進步的過程,在十幾年前大家寫 HTML 都是用記事本來撰寫,接著開始有「可視化」的編輯器,像是 FrontPage、Dreamweaver,讓想學網頁的人不會因為看到密密麻麻的程式碼而卻步。直到近幾年才又開始有 Sublime Text 3、ATOM、Visual Studio Code 這類的文字編輯器,與記事本相比,這種專門寫程式的編輯器可是強大的多了,每位開發者都可以為編輯器寫套件,讓其它人都可以安裝套件,你可以自己打造適合自己開發習慣的編輯器介面、熱鍵、顏色高亮、coding style、自動除錯等等。
它幫助開發者能夠聚焦在程式開發上,甚至能用自動化檢查的方式幫助你自動除錯,就以我自己來說 我的網頁編輯器操作歷史則是 FrontPage > Dreamweaver > Sublime Text 2、3 > Visual Studio Code,幾乎每隔兩三年我就會換編輯器來讓自己變得更強。
一開始學前端的時候,HTML 結構非常單純,頂多有插入一隻 CSS,網頁也只有一兩頁,但隨著你會的東西越來越多,架構也會跟著變大,如果每次在開發時,都要從零開始慢慢建構不是很辛苦嗎?首先要新增 HTML、CSS 檔,去 JS 框架官網下載最新版本,CSS 又必須重新寫過,每個細節如果不小心漏掉就又很麻煩。
所以你可以思考建構自己的 boilerplate,什麼是 boilerplate 呢?就是設計一個乾淨的開發環境,每當有新專案時,你就複製那個開發環境下來,裡頭就有你慣用的 JS 框架、前端任務工具 (Gulp、Webpack)、以及常用的 Sass Mixin 結構等等,讓你能夠專心在開發新程式上面,不會覺得每次開發都像是重新開始一樣。觀念又很像是你在大學上繳交報告給教授時被退回,因為你沒 follow 他的 word 標準格式,例如標題要 18px,行距要 1.5倍,所以教授提供給你一個 word 範例,裡面的各個設定都設好了,不要自己慢慢建立,只要遵守規範就有符合教授作業的規則是一樣的。
像是在 Github 上你關鍵字搜尋 boilerplate ,也可以看到許多開發者的建構環境,而我也會建議你在 Github 上面試著放自己的 boilerplate,當你有新專案時便透過 Git 指令 clone 下來就方便多了。
業界會有個鄙視鍊的玩笑,就以編輯器來說,連結裡也附註一段:「用 Vim 的工程師鄙視用 Emacs 的工程師,用 Emacs 的工程師鄙視用 Vim 的工程師,無論是用 Vim 或 Emacs 的工程師都鄙視所有用其他編輯器的工程師;用 Atom、Notepad++、Sublime Text 的工程師鄙視用 Windows 記事本的工程師。」。
這裡會建議不要鄙視別人用的工具,有些時候工程師用起來就是很不順手,像是以前我用 Dreamweaver 時,那時我就在想該選 notepad++ 還是 Sublime Text 2,後來我用了一陣子覺得 Sublime 用得比較順手,但周遭也有人選擇了 notepad,這中間其實又關係到自己的人格特質、喜好偏愛、操作習慣等等。
我自己也常遇到這種問題,例如有時候別人推薦的工具我聽他講完也覺得非常讚,但是我實際去用總是覺得哪裡卡卡的,最後硬用幾天宣告放棄,過幾天後發現另外個類似服務,一使用發現喜歡得不得了,甚至就直接註冊付費版,但真要我說兩者的差異我自己也說不上來。所以真的自己用得順手最重要。
不要小看這些工具運用的累積效用,就以 HTML 標籤來說,目前的熱門編輯器都有支援一個強大的套件叫做 emmet,你可以思考看看自己打以下程式碼需要多少時間,如果自己手打起碼也要一分鐘以上吧?但我用 emmet 只要 10 秒不到就可以打出來了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="all.css">
<script src="all.js"></script>
</head>
<body>
<div class="wrap">
<div class="header">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
</div>
</body>
</html>
如果一整年我跟你每天都會打一次這個語法,我就比你還多了整整五個小時做其它的事情,你說驚不驚人?專業的工程師為了讓自己更懶惰,自然會去找各種工具來提升寫 CODE 效率,讓自己擁有更多的時間專注在他想投入的事情上。
那麼到底該如何觀察自己的哪些環節可以用工具來輔助呢?最後也丟出一些檢核列表給你參考:
"如果每次在寫一個程式都會卡在一個抽象觀念上時,你就必須花時間瞭解它整體脈絡",這句好像有點不太看得懂.... 不知道大大可否解釋 或舉例來說明一下?
舉例來說用 flexbox 好了,你在操作他進行網頁排版時,時常出來的結果不如你的預期,於是你就亂 try 試圖得到對的結果,就算被你矇對了,功能也被你用出來,但其實你觀念還是不清楚的。
有些人會用專案忙而逃避觀念,以為應該再也不會碰到,但出來混遲早要還的,與其如此不如將它融會貫通,才能幫自己紮穩基礎,繼續往下個方向邁進哩。
回答的太好了
超同意老師說的順手最重要,像我自己則是除了學程式之外都沒看過課本
學語言是聽廣播和看原文小說、學畫畫是看畫冊,目前想的到最誇張的就是用平假名學俄文吧XD